<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			list-style: none;
		}

		ul {
			display: flex;
			justify-content: center;
		}

		li {
			width: 70px;
			height: 70px;
			border: 1px solid #a0913d;
			background: #000;
			color: #a0913d;
			border-radius: 7px;
			text-align: center;
			line-height: 70px;
			box-shadow: 5px 5px 5px #a0913d;
			margin: 10px 5px;
			transition: .3s;
		}

		.act {
			background-color: yellow;
			border-color: yellow;
			color: #333;
		}

		.act1 {
			background-color: greenyellow;
			border-color: greenyellow;
			color: #333;
		}
	</style>
	<body>
		<div id='app'>
			<ul>
				<li v-for='(item,index) in ques' :class="index<count ? 'act1':''">
					{{item}}
				</li>
			</ul>
			<ul v-for="(row,i) in keys">
				<li v-for='(col,j) in row' :class="col==key.toUpperCase()?'act':''">{{col}}</li>
			</ul>
			<h1>{{key}}</h1>
		</div>
		<script src="js/words.js"></script>
		<script>
			Vue.createApp({
				data() {
					return {
						ques: ['a', 'D', 'R', 'Y'],
						keys: [
							['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
							['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
							['Z', 'X', 'C', 'V', 'B', 'N', 'M']
						],
						key: '',
						count: 0
					}
				},
				mounted() {
					document.addEventListener('keydown', this.press)
				},
				methods: {
					press(event) {
						this.key = event.key
						if (this.key == this.ques[this.count]) {
							this.count++
							if (this.count == this.ques.length) {
								this.count = 0
								let i = Math.floor(Math.random() * words.length)
								this.ques = words[i].split('')
							}
						}
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>
